<template>
    <div id="pdf-container" v-show="show">
        <i class="fa fa-remove" style="position:absolute;right: 20px;top:20px;font-size: 24px;" @click="show=false"></i>
        <canvas id="the-canvas"></canvas>
        <div class="foot" v-if='pdfDoc'>
            <button class='left' v-if="pageNum>1" @click="onPrevPage">上一页</button>
            <button class='right' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一页</button>
        </div>
    </div>
</template>
<script>
  import PDFJS from 'pdfjs-dist'

  export default {
    data () {
      return {
        pdfDoc: null,
        pageNum: 1,
        pageRendering: false,
        pageNumPending: null,
        scale: 0.9,
        show: false
      }
    },
    methods: {
      showPDF (url) {
        let _this = this
        this.show = true
        console.log(url)
        PDFJS.getDocument(url).then(function (pdf) {
          console.log(pdf)
          _this.pdfDoc = pdf
          _this.renderPage(1)
        })
      },
      renderPage (num) {
        let _this = this
        this.pdfDoc.getPage(num).then(function (page) {
          let canvas = document.getElementById('the-canvas')
          let ctx = canvas.getContext('2d')
          let dpr = window.devicePixelRatio || 1
          let bsr = ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio || 1
          let ratio = dpr / bsr
          var viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
          canvas.width = viewport.width * ratio
          canvas.height = viewport.height * ratio
          canvas.style.width = viewport.width + 'px'
          canvas.style.height = viewport.height + 'px'
          ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
          var renderContext = {
            canvasContext: ctx,
            viewport: viewport
          }
          page.render(renderContext)
          if (_this.pages > num) {
            _this.renderPage(num + 1)
          }
        })
      },
      queueRenderPage (num) {
        if (this.pageRendering) {
          this.pageNumPending = num
        } else {
          this.renderPage(num)
        }
      },
      onPrevPage () {
        if (this.pageNum <= 1) {
          return
        }
        this.pageNum--
        this.queueRenderPage(this.pageNum)
      },
      onNextPage () {
        if (this.pageNum >= this.pdfDoc.numPages) {
          return
        }
        this.pageNum++
        this.queueRenderPage(this.pageNum)
      }
    }
  }
</script>

<style scoped>
    #pdf-container {
        background-color: rgba(0,0,0,0.75);
        position:fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        padding: 5px;
        z-index: 10;
    }

    .pdf-page {

    }

    .foot {
        position: fixed;
        transform: translate(-50%,0);
        left: 50%;
    }
</style>
